<template>
	<view class="withdraw">
		<view class="withdraw-head">
			<view class="withdraw-head-to">到账渠道</view>
			<view class="withdraw-head-way">
				<view class="withdraw-head-way-1" @tap="toUrl">
					<image class="way-icon" src="@/static/images/icon-site.png"></image>
					<text class="way-text" v-if="zfbName">{{zfbName}}</text>
					<text class="way-text" v-else>去添加账户</text>
				</view>
				<view class="withdraw-head-way-1" v-if="zfbName" @tap="toUrl">
					<text class="way-text">{{zfbAccount}}</text>
				</view>
				<view class="withdraw-head-way-2">仅支持整数</view>
				<!-- 72小时内到账 -->
			</view>
		</view>
		<view class="withdraw-body">
			<text>积分提现</text>
			<text style="font-size: 24rpx;color: gray;">（注：1积分为0.01元）</text>
			<view class="input-money">
				<text class="rmb">￥</text>
				<input v-model="money" placeholder="0.00" class="t-input" />
			</view>
			<view class="info-money">
				<view>
					<text class="info-money-num">当前可提现积分{{able_withdrawal}}，</text>
					<text class="info-money-all" @tap="allWithdraw">全部提现</text>
				</view>
			</view>


			<!-- 			<checkbox :checked="isAgree" style="margin-bottom: 10px;" :checked-color="primaryColor" @click="changeChecked">
				<view class="sm row" style="flex-wrap: wrap;width: 100%;">
					已阅读并同意
					<navigator @tap.stop="" class="primary" hover-class="none"
						url="/pages/bundle/server_explan/server_explan?type=0">《服务协议》</navigator>
					<navigator @tap.stop="" class="primary" hover-class="none"
						url="/pages/bundle/server_explan/server_explan?type=4">《灵活就业合作伙伴协议》</navigator>
				</view>
			</checkbox> -->

			<view v-if="isShow" class="tx-active"><button @click="applyWithdrawFun(5)" class="tx">提现</button></view>
			<view v-else class="tx"><button class="tx">提现</button></view>
		</view>
		<!-- 		<view class="bg-white w100 mt20 br20 column-between p30" style="min-height: 300rpx;">
			<text class="column-text" style="line-height: 60rpx;font-weight: bold;font-size: 15px;">注意事项</text>
			<view class="column column-text">
				<text>1. 请确认输入正确的提现金额</text>
				<text>2. 提现金额不能低于10元,每笔收取{{widthDrawConfig.poundage_percent}}%提现手续费</text>
				<text>3. 每日下午5点~5点半为财务对账时间，该时间段内无法提现</text>
				<text>4. 务必填写有效的姓名、手机号、银行账号以保证提现正常</text>
				<text>5. 收款人年龄需在18-65周岁之间</text>
			</view>
		</view> -->
		<navigator url="/pages/mine/user_withdraw_code/user_withdraw_code" hover-class="none"
			class="mt20 nr lighter row-center">
			提现记录
		</navigator>
	</view>
</template>

<script>
	import {
		selectBankListApi,
		withdrawalApplyApi,
		getTotalPointsApi,
	} from '@/api/index.js';
	export default {
		data() {
			return {
				able_withdrawal: 0,
				active: 0,
				money: '',
				zfbAccount: '',
				zfbName: '',
				qrCode: '',
				remark: '',
				isShow: true,
				fileList: [],
				widthDrawConfig: {},
				widthDrawWay: [],
				isAgree: false,
				bankAccountId: '',
			};
		},
		onLoad() {
			this.selectBankList();
		},
		onShow() {
			this.getTotalPoints();
			const user_account = uni.getStorageSync('user_account');
			console.log(user_account, 'user_account');
			if (user_account) {
				const filterDefaultUser = JSON.parse(user_account);
				this.zfbName = filterDefaultUser.zfbName;
				this.zfbAccount = filterDefaultUser.zfbAccount;
				this.bankAccountId = filterDefaultUser.id;
				uni.setStorageSync('user_account', null)
			}
		},
		methods: {
			// 查询用户总积分
			async getTotalPoints() {
				const res = await getTotalPointsApi(uni.getStorageSync('UserInfo').userId);
				console.log(res, '查询用户总积分');
				if (res.code === 200) {
					this.able_withdrawal = res.data.availablePoints;
				}
			},
			// 查询银行列表
			async selectBankList() {
				const res = await selectBankListApi(uni.getStorageSync('UserInfo').userId);
				console.log(res, 'res-查询银行列表');
				if (res.code === 200 && res.data.length > 0) {
					const filterDefaultUser = res.data.filter((item) => item.isDefault === 1);
					console.log(filterDefaultUser, 'filterDefaultUser');
					if (filterDefaultUser && filterDefaultUser.length > 0) {
						this.zfbName = filterDefaultUser[0].zfbName;
						this.zfbAccount = filterDefaultUser[0].zfbAccount;
						this.bankAccountId = filterDefaultUser[0].id;
					}
				}
			},
			toUrl() {
				const url = this.zfbName ? '/pages/mine/userAccount/userAccount?type=1' :
					'/pages/mine/account_edit/account_edit'
				uni.navigateTo({
					url
				})
			},
			changeChecked() {
				this.isAgree = !this.isAgree
			},
			allWithdraw(e) {
				this.money = this.able_withdrawal.toString()
			},
			// 申请提现
			applyWithdrawFun() {
				if (!this.money) {
					this.$modal.msg("请输入提现积分")
					return;
				}
				withdrawalApplyApi({
					userId: uni.getStorageSync('UserInfo').userId,
					amount: this.money,
					zfbAccountId: this.bankAccountId,
					channel: '支付宝'
				}).then(res => {
					if (res.code == 200) {
						this.money = '';
						this.$modal.msg("提交成功")
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/mine/user_withdraw_code/user_withdraw_code'
							})
						}, 2000)
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ededed;
	}

	.withdraw {
		padding: 20px;

		.withdraw-head {
			background-color: #f7f7f7;
			display: flex;
			align-content: center;
			padding: 20px 30px;
			font-size: 14px;

			.withdraw-head-to {}

			.withdraw-head-way {
				display: flex;
				flex-direction: column;
				align-content: center;
				margin-left: 20px;

				.withdraw-head-way-1 {
					color: #576b95;
					margin-bottom: 10px;

					.way-icon {
						width: 16px;
						height: 16px;
						margin-right: 5px;
						top: 2px;
					}
				}

				.withdraw-head-way-2 {
					color: #acacac;
					font-size: 12px;
				}
			}
		}

		.withdraw-body {
			background-color: #fff;
			padding: 20px 30px;
			font-size: 14px;

			.input-money {
				display: flex;
				align-content: center;
				font-weight: 600;
				border-bottom: 0.5px solid #eaeef1;

				.rmb {
					font-size: 2em;
					top: 10px;
					position: relative;
				}

				.t-input {
					height: 1.9em;
					font-size: 2.5em;
					border: none;
					position: relative;
					left: 3.5%;
					outline: none;
				}
			}

			.info-money {
				margin-top: 10px;
				font-size: 12px;
				margin-bottom: 20px;

				.info-money-num {
					color: #b2b2b2;
				}

				.info-money-all {
					color: #576b95;
				}
			}

			.tx {
				button {
					color: #fff;
					background-image: linear-gradient(to right, #717171, #b2b2b2);
				}
			}

			.tx-active {
				button {
					color: #fff;
					background-image: linear-gradient(to right, #FF2100, #FE7E44);
				}
			}

		}

		.keyboard {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #ebebeb;
			display: flex;
			justify-content: center;
			z-index: 2;
			flex-wrap: wrap;
			transition: all 0.2s ease-in 0.2s;
		}

		.active {
			bottom: -400rpx;
		}

		.keyboard-item {
			box-sizing: border-box;
			width: 250rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: #fff;
			font-size: 40rpx;
			color: #333;
			height: 99rpx;
			border: 1rpx solid #ebebeb;
			border-top: none;
			border-left: none;
		}

		.hide {
			opacity: 0;
		}

		.delte {
			background: none;
			box-shadow: none;
		}

		.delte image {
			width: 60rpx;
			height: 60rpx;
		}

		.isIphone {
			padding-bottom: 68rpx !important;
		}

		.fee {
			em {
				font-size: 0.5rem;
				font-style: normal;
			}
		}

	}

	.column-text {
		color: #000;
	}
</style>